app/[lang]/_hooks/useFetchSupportArticles.ts (1)

85-94: Consider extracting URL construction to a helper function.

The fetch URL construction on line 88 is extremely long (400+ characters) and hard to read/maintain. Consider extracting this to a dedicated helper function that builds the URL from parameters.

Example refactor:

function buildSupportArticlesUrl({
	sort,
	page,
	pageSize,
	populateContent,
	slug,
	encodedTag,
	encodedSearch
}: {
	sort: string
	page: number
	pageSize: number
	populateContent: boolean
	slug?: string
	encodedTag?: string
	encodedSearch?: string
}): string {
	const baseUrl = `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/support-articles`
	const params = new URLSearchParams({
		'populate[0]': 'featuredImg',
		'fields[0]': 'slug',
		'fields[1]': 'summary',
		'fields[2]': 'title',
		'fields[3]': 'publishedAt',
		'fields[4]': 'tags',
		'sort[0]': `publishedAt:${sort}`,
		'pagination[page]': page.toString(),
		'pagination[pageSize]': pageSize.toString(),
		'pagination[withCount]': 'true'
	})
	
	if (populateContent) params.append('fields[5]', 'content')
	if (slug) params.append('filters[slug][$eq]', slug)
	if (encodedTag) params.append('filters[tags][$contains]', encodedTag)
	if (encodedSearch) {
		params.append('filters[$or][0][title][$containsi]', encodedSearch)
		params.append('filters[$or][1][summary][$containsi]', encodedSearch)
	}
	
	return `${baseUrl}?${params.toString()}`
}

Then use: const res = await fetch(buildSupportArticlesUrl({...}), {...})

app/[lang]/(resources)/support/_components/SupportTags.tsx (2)

20-27: Simplify the active state check.

The condition active === null || active === undefined is redundant. Since active is typed as string | null | undefined, you can simplify this check.

Apply this diff:

-	className={`rounded-full border px-4 py-2 text-sm ${
-		active === null || active === undefined ? 'bg-white/10' : 'bg-transparent'
-	}`}>
+	className={`rounded-full border px-4 py-2 text-sm ${
+		!active ? 'bg-white/10' : 'bg-transparent'
+	}`}>

---

17-39: Consider accessibility enhancements for the tag filter.

While the component is functional, consider these accessibility improvements:

1. Add aria-label to the "All" button (e.g., "Show all articles")
2. Add role="group" and aria-label="Filter by tag" to the container
3. Add aria-pressed to buttons to indicate toggle state

Example enhancement:

-	<div className={`${className ?? ''} mb-10`}>
+	<div className={`${className ?? ''} mb-10`} role="group" aria-label="Filter by tag">
 		<div className={'flex flex-wrap gap-3 justify-center'}>
 			<button
 				type={'button'}
 				onClick={() => onClick(null)}
+				aria-label="Show all articles"
+				aria-pressed={!active}
 				className={`rounded-full border px-4 py-2 text-sm ${
 					active === null || active === undefined ? 'bg-white/10' : 'bg-transparent'
 				}`}>
 				{'All'}
 			</button>
 			{tags.map(t => (
 				<button
 					type={'button'}
 					key={t}
 					onClick={() => onClick(t)}
+					aria-pressed={active === t}
 					className={`rounded-full border px-4 py-2 text-sm ${active === t ? 'bg-white/10' : 'bg-transparent'}`}>
 					{t}
 				</button>
 			))}
 		</div>
 	</div>

app/[lang]/(resources)/_components/SupportArticleList.tsx (7)

58-70: Optimization: fetchPageSize is always equal to pageSize.

Lines 58-59 assign fetchPageSize = pageSize unconditionally. The variable fetchPageSize adds no value and can be replaced with pageSize directly.

Apply this diff to simplify:

-	// server-side filtering: always use the configured pageSize; grouped view will show previews and
-	// provide "View all" links to the paginated tag view instead of fetching the entire dataset.
-	const fetchPage = activeTag ? page : 1
-	const fetchPageSize = pageSize
-
 	const {articles, pagination, isLoading} = useFetchSupportArticles({
-		page: fetchPage,
-		pageSize: fetchPageSize,
+		page: activeTag ? page : 1,
+		pageSize,
 		sort,
 		populateContent,
 		cacheArticles,
 		tag: activeTag,
 		search: searchQuery,
 		skip: false
 	})

---

76-76: Remove unused variable.

filteredArticles is assigned the value of articles but doesn't perform any filtering. Since the server already returns filtered results, directly use articles throughout the component.

Apply this diff to remove the unused variable:

-	// Server returns results already filtered by tag and search; render `articles` directly
-	const filteredArticles = articles
-
 	// When in the grouped view (no active tag), prepare tags and grouped lists
 	const groupedTags = useMemo(() => {
-		if (!filteredArticles) {
+		if (!articles) {
 			return []
 		}
-		return Array.from(new Set(filteredArticles.flatMap(a => a.tags ?? []))).sort()
-	}, [filteredArticles])
+		return Array.from(new Set(articles.flatMap(a => a.tags ?? []))).sort()
+	}, [articles])

 	const groupedArticles = useMemo(() => {
 		const map: Record<string, TSupportArticle[]> = {}
 		for (const t of groupedTags) {
-			map[t] = (filteredArticles || []).filter(a => (a.tags ?? []).includes(t))
+			map[t] = (articles || []).filter(a => (a.tags ?? []).includes(t))
 		}
 		return map
-	}, [filteredArticles, groupedTags])
+	}, [articles, groupedTags])

And update references in the render section:

-		{!filteredArticles || filteredArticles.length === 0 ? (
+		{!articles || articles.length === 0 ? (
 			<p
 				className={'my-20 text-center text-2xl text-gray-400'}
 				role={'status'}>
@@ -172,7 +172,7 @@
 						</div>
 						<div className={cl('grid gap-6 md:grid-cols-2 lg:grid-cols-3', gridClassName)}>
-							{filteredArticles.map((article: TSupportArticle) => (
+							{articles.map((article: TSupportArticle) => (
 								<ArticleCard

---

79-84: Handle undefined articles gracefully.

The null-check on Line 80 only guards against undefined/null but doesn't account for an empty array. While not a bug (empty array returns empty groupedTags), the logic would be clearer by checking array length.

Apply this diff to make the intent clearer:

 	const groupedTags = useMemo(() => {
-		if (!filteredArticles) {
+		if (!articles || articles.length === 0) {
 			return []
 		}
-		return Array.from(new Set(filteredArticles.flatMap(a => a.tags ?? []))).sort()
-	}, [filteredArticles])
+		return Array.from(new Set(articles.flatMap(a => a.tags ?? []))).sort()
+	}, [articles])

---

130-157: Review the responsive width constraint.

Lines 131-156 wrap SupportTags and SearchBar in a w-1/2 container. On smaller screens this may be too narrow. Consider using responsive width classes like w-full lg:w-1/2 for better mobile UX.

Apply this diff to improve mobile responsiveness:

 			<div className={'flex w-full justify-center'}>
-				<div className={'w-1/2'}>
+				<div className={'w-full px-4 lg:w-1/2 lg:px-0'}>
 					<SupportTags

---

138-148: Simplify tag state derivation.

Line 138 uses urlTag ?? tag ?? null, but activeTag (Line 54) already computes urlTag ?? tag. Reuse activeTag for consistency.

Apply this diff:

 					<SupportTags
 						tags={
 							activeTag
 								? Array.from(new Set((articles || []).flatMap(a => a.tags ?? [])))
 								: groupedTags
 						}
-						active={urlTag ?? tag ?? null}
+						active={activeTag ?? null}
 						onClick={(t: string | null) => {

---

160-165: Enhance empty state accessibility.

The empty state paragraph uses role={'status'} which is appropriate for dynamic content updates. However, consider adding aria-live="polite" to ensure screen readers announce changes when search/filter results change.

Apply this diff:

 			<p
-				className={'my-20 text-center text-2xl text-gray-400'}
-				role={'status'}>
+				className={'my-20 text-center text-2xl text-gray-400'}
+				role={'status'}
+				aria-live={'polite'}>
 				{emptyMessage}
 			</p>

---

46-48: Language parameter may be undefined for root routes

There are app/layout.tsx and app/page.tsx at the root (outside [lang]), so lang can legitimately be undefined and defaulting to '' is expected. If you intend to require lang across all routes, consider moving these files under app/[lang] or adding a redirect from / to a default language.

app/[lang]/(resources)/support/_components/SupportArticleClient.tsx (1)

22-22: Enhance sourceTag display with semantic HTML.

The source tag paragraph could benefit from a more descriptive label or semantic tag rendering for clarity.

Consider applying this diff for better UX:

-			{sourceTag && <p className={'mb-2 text-sm text-gray-400'}>{sourceTag}</p>}
+			{sourceTag && (
+				<p className={'mb-2 text-sm text-gray-400'}>
+					<span className={'font-semibold'}>{'Category: '}</span>
+					{sourceTag}
+				</p>
+			)}

app/[lang]/(resources)/support/[slug]/page.tsx (1)

47-48: Consider making baseUrl configurable with fallback.

The baseUrl defaults to 'https://shapeshift.com' if NEXT_PUBLIC_SITE_URL is missing. This may cause incorrect URLs in non-production environments.

Apply this diff to make the fallback more explicit:

 	// Generate structured data for the support article
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? (process.env.NODE_ENV === 'production' ? 'https://shapeshift.com' : 'http://localhost:3000')
 	const articleSchema = generateSupportArticleSchema(article, baseUrl)

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/[lang]/(resources)/support/_components/SupportArticleClient.tsx (1)

16-23: Accessibility improvements successfully implemented.

The previous review comments have been addressed—type="button", aria-label, and responsive hidden lg:flex classes are all in place.

app/[lang]/_hooks/useFetchSupportArticles.ts (2)

88-88: Consider using field names without array indices for maintainability.

The hardcoded field array indices (fields[0]=slug, fields[1]=summary, etc.) are brittle—if the Strapi schema or field order changes, this breaks. Strapi typically allows fields=slug,summary,title,publishedAt,tags syntax without indices.

Apply this approach for more maintainable field selection:

-`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/support-articles?populate[0]=featuredImg&fields[0]=slug&fields[1]=summary&fields[2]=title&fields[3]=publishedAt&fields[4]=tags&sort[0]=publishedAt:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[5]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}${encodedTag ? `&filters[tags][$contains]=${encodedTag}` : ''}${encodedSearch ? `&filters[$or][0][title][$containsi]=${encodedSearch}&filters[$or][1][summary][$containsi]=${encodedSearch}` : ''}`
+`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/support-articles?populate=featuredImg&fields=slug,summary,title,publishedAt,tags${populateContent ? ',content' : ''}&sort=publishedAt:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${slug ? `&filters[slug][$eq]=${slug}` : ''}${encodedTag ? `&filters[tags][$contains]=${encodedTag}` : ''}${encodedSearch ? `&filters[$or][0][title][$containsi]=${encodedSearch}&filters[$or][1][summary][$containsi]=${encodedSearch}` : ''}`

---

126-130: Optional: Simplify pagination dependencies.

Lines 127-130 list individual pagination properties, but line 126 already references cachedResponse.meta.pagination. The granular properties are redundant. Consider removing lines 127-130 to reduce verbosity without changing behavior.

 		cachedResponse.data,
 		cachedResponse.meta.pagination,
-		cachedResponse.meta.pagination.page,
-		cachedResponse.meta.pagination.pageCount,
-		cachedResponse.meta.pagination.pageSize,
-		cachedResponse.meta.pagination.total,
 		page,

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/[lang]/(resources)/_components/SupportArticleList.tsx (4)

86-92: Optimize groupedArticles computation.

The current implementation filters filteredArticles for each tag (O(tags × articles)). For better performance, consider grouping articles in a single pass:

 const groupedArticles = useMemo(() => {
   const map: Record<string, TSupportArticle[]> = {}
-  for (const t of groupedTags) {
-    map[t] = (filteredArticles || []).filter(a => (a.tags ?? []).includes(t))
+  for (const article of filteredArticles || []) {
+    for (const t of article.tags ?? []) {
+      if (!map[t]) map[t] = []
+      map[t].push(article)
+    }
   }
   return map
-}, [filteredArticles, groupedTags])
+}, [filteredArticles])

---

94-113: Consider hoisting ArticleCard outside the component.

Defining ArticleCard inside the parent component causes it to be recreated on every render. For a minor performance optimization, consider hoisting it outside as a standalone component or memoizing it with useCallback. This is optional and unlikely to cause noticeable issues given the current usage.

---

132-155: Past review comment addressed; consider memoizing tag derivation.

The tag pill survival logic (lines 135-140) correctly ensures that the active tag remains in the list even when filtered results are empty, addressing the previous review concern. For a minor performance improvement, consider extracting the IIFE into a useMemo:

+const displayedTags = useMemo(() => {
+  if (!activeTag) return groupedTags
+  const derived = Array.from(new Set((articles || []).flatMap(a => a.tags ?? [])))
+  return derived.length > 0 ? derived : [activeTag]
+}, [activeTag, articles, groupedTags])
+
 <SupportTags
-  tags={
-    activeTag
-      ? (() => {
-          const derived = Array.from(
-            new Set((articles || []).flatMap(a => a.tags ?? []))
-          )
-          return derived.length > 0 ? derived : [activeTag]
-        })()
-      : groupedTags
-  }
+  tags={displayedTags}
   active={activeTag}
   onClick={(t: string | null) => {

---

215-247: Consider syncing page state with URL query params.

Pagination state is kept in local state (page) but not reflected in the URL. If a user navigates to page 3 and refreshes, they'll be reset to page 1. For better UX and shareable URLs, consider syncing the page state with a ?page= query parameter.

Example:

// Read page from URL on mount
const urlPage = searchParams?.get('page')
const [page, setPage] = useState(urlPage ? parseInt(urlPage, 10) : initialPage)

// Update URL when page changes
function handlePageChange({selected}: {selected: number}) {
  const newPage = selected + 1
  setPage(newPage)
  const params = new URLSearchParams(Array.from(searchParams || []))
  params.set('page', newPage.toString())
  router.push(`/${lang}/support?${params.toString()}`)
}

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/[lang]/(resources)/_components/SupportArticleList.tsx (2)

130-162: Consider memoizing the derived tag list.

The inline IIFE (lines 135-140) runs on every render. While the past review comment has been addressed functionally (empty results now preserve the active tag), memoizing this computation would improve performance.

+	const displayedTags = useMemo(() => {
+		if (!activeTag) return groupedTags
+		const derived = Array.from(new Set((articles || []).flatMap(a => a.tags ?? [])))
+		return derived.length > 0 ? derived : [activeTag]
+	}, [activeTag, articles, groupedTags])
+
 	// ... later in JSX ...
 	<SupportTags
-		tags={
-			activeTag
-				? (() => {
-						const derived = Array.from(
-							new Set((articles || []).flatMap(a => a.tags ?? []))
-						)
-						return derived.length > 0 ? derived : [activeTag]
-					})()
-				: groupedTags
-		}
+		tags={displayedTags}
 		active={activeTag}

---

215-247: Consider adding forcePage prop for controlled pagination.

The pagination correctly renders only for tag-filtered views. However, without forcePage, the component maintains its own internal state for the active page, which could desynchronize from your page state if the user navigates via other means (e.g., browser back button or tag changes).

 <ReactPaginate
+	forcePage={page - 1}
 	pageCount={pagination?.pageCount ?? 1}
 	pageRangeDisplayed={5}
 	marginPagesDisplayed={2}
 	onPageChange={({selected}) => setPage(selected + 1)}

This ensures the visual active page always matches your component state.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/[lang]/(resources)/support/_components/SupportTags.tsx (2)

21-28: Consider adding accessibility attributes for active state.

The "All" button would benefit from aria-current="page" or aria-pressed when active to better communicate state to assistive technologies.

Apply this diff to improve accessibility:

 <button
 	type={'button'}
 	onClick={() => onClick(null)}
+	aria-pressed={active === null || active === undefined}
 	className={`rounded-full border text-sm whitespace-nowrap px-3 py-1.5 sm:px-4 sm:py-2 ${
 		active === null || active === undefined ? 'bg-blue' : 'bg-transparent'
 	}`}>
 	{'All'}
 </button>

---

29-39: Consider adding accessibility attributes for tag buttons.

Similar to the "All" button, tag filter buttons would benefit from aria-pressed to communicate active state to screen readers.

Apply this diff:

 <button
 	type={'button'}
 	key={t}
 	onClick={() => onClick(t)}
+	aria-pressed={active === t}
 	className={`rounded-full border text-sm whitespace-nowrap px-3 py-1.5 sm:px-4 sm:py-2 ${
 		active === t ? 'bg-blue' : 'bg-transparent'
 	}`}>
 	{t}
 </button>

app/[lang]/(resources)/support/[slug]/SupportArticleContent.tsx (1)

71-95: Consider extracting language detection logic.

The code block renderer has inline language detection (/language-(\w+)/.exec(className || '')) that could be extracted to a helper function for better testability and reusability.

Example refactor:

function extractLanguage(className?: string): string | null {
	if (!className) return null
	const match = /language-(\w+)/.exec(className)
	return match ? match[1] : null
}

Then use in the renderer:

-const match = /language-(\w+)/.exec(className || '')
+const language = extractLanguage(className)
-return match ? (
+return language ? (
 	<div className={'relative'}>
-		<div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
+		<div className={'absolute right-2 top-2 text-xs text-gray-400'}>{language}</div>

app/[lang]/(resources)/_components/SupportArticleList.tsx (1)

239-240: Consider documenting the 9-item limit.

The .slice(0, 9) limit for preview articles is hardcoded without explanation. Consider extracting this to a named constant or adding a comment explaining why 9 items (likely to match a 3-column grid).

Example:

const PREVIEW_LIMIT = 9 // 3 rows × 3 columns in desktop grid

Then use:

-	.slice(0, 9)
+	.slice(0, PREVIEW_LIMIT)

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/[lang]/(resources)/_components/SupportArticleList.tsx (3)

67-68: Client-side search triggers server refetch without debouncing.

Every keystroke in the search input updates searchQuery immediately and triggers a server fetch via useFetchSupportArticles (lines 79-88), potentially causing excessive API calls during typing. Consider debouncing the search query to reduce server load.

Example using a debounced value:

const [searchQuery, setSearchQuery] = useState('')
const [debouncedSearch, setDebouncedSearch] = useState('')

useEffect(() => {
  const timer = setTimeout(() => setDebouncedSearch(searchQuery), 300)
  return () => clearTimeout(timer)
}, [searchQuery])

// Then use debouncedSearch in useFetchSupportArticles instead of searchQuery
const {articles, pagination, isLoading} = useFetchSupportArticles({
  // ...
  search: debouncedSearch,
  // ...
})

---

112-142: Tag discovery prefetch may cause unnecessary load.

The prefetch for discoveryArticles (lines 112-121) runs whenever allTags === null, even when the user is actively filtering/searching. This means on initial page load with an active tag, two separate fetches occur: one filtered fetch and one unfiltered discovery fetch. While this ensures tag discovery, it doubles the initial load.

Consider these alternatives:

1. Server-side: Include all available tags in the API response metadata (e.g., meta.availableTags) to eliminate the client-side discovery fetch entirely.
2. Client-side: Only trigger discovery when needed, or cache the discovered tags in localStorage/sessionStorage to avoid repeated prefetches across page navigations.

---

285-286: Consider reducing preview limit from 6 to 3 articles per tag.

The preview shows up to 6 articles per tag (line 286), which on mobile could create very long pages when multiple tags exist. The PR objectives mention "preview cards" without specifying the limit.

Consider reducing to 3 articles per tag in grouped preview mode to keep the overview more compact, or make it configurable via props:

-  .slice(0, 6)
+  .slice(0, 3)

app/[lang]/(resources)/support/[slug]/SupportArticleContent.tsx (1)

256-322: Consider extracting global styles to a CSS module.

The inline <style> block (lines 256-322) contains comprehensive styling for markdown content. While functional, this approach has some drawbacks:

• Styles are re-declared on every render
• Harder to maintain and test
• No type safety for class names

Consider extracting to a CSS module or global stylesheet:

// support-article-content.module.css
.supportContent {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #e5e7eb;
}

.supportContent pre {
  background-color: #1f2937;
  padding: 1.5rem;
  /* ... */
}

// Then import and use:
import styles from './support-article-content.module.css'

return (
  <div className={cl('prose prose-invert max-w-none', styles.supportContent)}>
    {/* ... */}
  </div>
)

app/[lang]/(resources)/support/[slug]/page.tsx (2)

51-52: Consider caching the schema generation.

The generateSupportArticleSchema function (line 52) is called on every request. Since the schema only depends on article data (which is already fresh from Strapi), this is fine. However, if schema generation becomes more complex in the future, consider memoizing it.

This is a minor optimization opportunity for future consideration, not an immediate concern.

---

64-72: Optimize Suspense boundary around SupportArticleClient
SupportArticleClient is a client component (uses useSearchParams), so React will show your skeleton fallback until it hydrates—causing a brief flash. To avoid this:

• Extract the back button (static UI) outside the <Suspense>
• Replace the heavy skeleton with null or a minimalist loader

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.